import React, { useState } from 'react';
import { Layout, Menu, theme, Button } from 'antd';
import { useNavigate } from 'react-router-dom';
import { InsuranceTwoTone } from '@ant-design/icons';
import Backupset from "../pages/backupset"

const { Header, Content } = Layout;

const menuItems = [
  {
    key: '1',
    label: '备份数据',
    content: <Backupset />
  },
  {
    key: '2',
    label: '我的数据',
    content: <div><h2>我的数据</h2></div>
  },
  {
    key: '3',
    label: '账号管理',
    content: <div><h2>账号管理</h2></div>
  },
  {
    key: '4',
    label: '数据仓库',
    content: <div><h2>数据仓库</h2></div>
  },
  {
    key: '5',
    label: '权限管理',
    content: <div><h2>我的账号</h2></div>
  }
];

const userInfo = {
  name: localStorage.getItem('bku_username'),
  role: localStorage.getItem('bku_power'),
};

const App: React.FC = () => {
  const {
    token: { borderRadiusLG },
  } = theme.useToken();

  const [selectedKey, setSelectedKey] = useState('1');
  const [currentContent, setCurrentContent] = useState(menuItems[0].content);
  const navigate = useNavigate();

  const handleMenuClick = (e: { key: string }) => {
    setSelectedKey(e.key);
    const selectedItem = menuItems.find(item => item.key === e.key);
    if (selectedItem) {
      setCurrentContent(selectedItem.content);
    }
  };

  const handleActionButtonClick = () => {
    localStorage.removeItem('bku_token');
    localStorage.removeItem('bku_username');
    localStorage.removeItem('bku_power');
    navigate('/');
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        {/* 导航栏左侧 */}
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <InsuranceTwoTone style={{ fontSize: '48px' }} />
          <div className="demo-logo" style={{
            fontSize: 20, fontWeight: 1000, color: '#ffffffff', marginRight: '30px', padding: '0 10px'
          }} >
            数据备份软件
          </div>
          <Menu
            theme="dark"
            mode="horizontal"
            selectedKeys={[selectedKey]}
            items={menuItems.map(item => ({ key: item.key, label: item.label }))}
            onClick={handleMenuClick}
            style={{ flex: 1, minWidth: 0 }}
          />
        </div>

        {/* 导航栏右侧 */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', color: '#fff', gap: 8 }}>
            <div style={{ textAlign: 'right', display: 'flex', gap: '2px' }}>
              <div style={{ fontSize: 14, fontWeight: 1000 }}>{userInfo.name} |</div>
              {userInfo.role === '1' ? (
                <div style={{ fontSize: 14, fontWeight: 1000, color: '#3cff00a4' }}>普通用户</div>
              ) : userInfo.role === '2' ? (
                <div style={{ fontSize: 14, fontWeight: 1000, color: '#00aeffb4' }}>管理员</div>
              ) :
                <div style={{ fontSize: 14, fontWeight: 1000, color: '#a600ffb4' }}>超级管理员</div>
              }
            </div>
          </div>

          <Button
            onClick={handleActionButtonClick}
            type="primary" danger ghost
          >
            退出登录
          </Button>
        </div>
      </Header>

      {/* 内容 */}
      <Content style={{ padding: '0 48px', flex: 1, display: 'flex', flexDirection: 'column', backgroundImage: 'linear-gradient(135deg, #61b3ffff, #e6f7ff)', }}>
        <div
          style={{
            background: 'transparent',
            padding: 24,
            borderRadius: borderRadiusLG,
            flex: 1,
            overflow: 'auto',
            maxHeight: '100vh',
            overflowY: 'auto',
            scrollbarWidth: 'none',
          }}
        >
          {currentContent}
        </div>
      </Content>
    </Layout>
  );
};

export default App;
